<template>
	<view class="index-container">
		<u-sticky>
			<Header :leftTitlePrimary="pageName"></Header>
			<view class="search-wrapper">
				<u-search v-model="queryParams.activityTitle" placeholder="请输入关键字搜索" height="65rpx" bgColor="#f4f5f9"
					searchIconColor="#181818" :showAction="false" clearabled @clear="handleQuery()"
					@search="handleQuery()"></u-search>
				<view class="scan">
					<u-icon name="scan" size="30" color="#606266"></u-icon>
				</view>
			</view>
		</u-sticky>

		<view style="padding: 5px 15px 10px;background-color: #ffffff;">
			<u-swiper height="360rpx" :list="bannerList" indicator indicatorMode="dot" circular
				imgMode="scaleToFill"></u-swiper>
		</view>

		<view class="index-wrapper">
			<view class="more-wrap">
				<view class="menus-grid"
					:style="{gridTemplateColumns: 'repeat('+4+', 1fr)', padding: (!bg) ? '0px' : '15px 10px 20px;'}">
					<view class="menus-items" v-for="(btn,index) in contentList" :key="index">
						<image :src="btn.url" :style="{width: 85+'rpx',height: 85+'rpx'}"></image>
						<text :style="{fontSize: 12+'px'}" style="margin-top: 6px;">{{ btn.name }}</text>
					</view>
				</view>
			</view>

			<u-notice-bar :text="text1" mode="closable"></u-notice-bar>
			<view class="question-wrap">
				<view class="dynamic-header">
					<view class="dynamic-name">每日推荐</view>
					<view class="dynamic-reload">
						<u-icon name="reload" size="16px" color="#909399"></u-icon>
						<text>换一换</text>
					</view>
				</view>

				<view class="question-items" v-for="(item, index) in questionList" :key="index">
					<view class="question-left">
						<view class="question-title">{{ item.title }}</view>

						<view class="question-img" v-if="item.imgUrl.length > 1">
							<view class="item" v-for="(url, uIndex) in item.imgUrl" :key="uIndex">
								<u--image :src="url" width="230rpx" height="160rpx" radius="5px"></u--image>
							</view>
						</view>
						<view class="question-img" v-else></view>

						<view class="question-info">
							<text>{{ item.author }} {{ item.count }}阅读</text>
						</view>
					</view>
					<block v-if="item.imgUrl.length === 1">
						<u--image :src="item.imgUrl[0]" width="200rpx" height="150rpx" radius="5px"></u--image>
					</block>
				</view>

				<view class="dynamic-more">查看更多</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageName: '老年传媒',
				text1: '岁月的智慧，传媒的桥梁 —— 共享银发生活，传递长者之声',
				bannerList: [
					"https://s3.bmp.ovh/imgs/2024/06/05/5e74d6c3faf67dee.jpg",
					"https://s3.bmp.ovh/imgs/2024/06/05/19471050e6bc4b30.jpg",
					"https://s3.bmp.ovh/imgs/2024/06/05/289335221c2f162f.jpg",
				],
				contentList: [{
						url: "/static/index/two.png",
						name: "热门话题"
					}, {
						url: "/static/index/three.png",
						name: "扫一扫"
					},
					{
						url: "/static/index/four.png",
						name: "使用帮助"
					},
					{
						url: "/static/index/one.png",
						name: "服务反馈"
					},
				],
				questionList: [{
						"title": "探索均衡饮食的重要性：如何在忙碌的生活中保持营养均衡",
						"author": "健康美食家",
						"count": 24,
						"imgUrl": [
							"https://s3.bmp.ovh/imgs/2024/05/31/4e8e398144621866.jpeg",
						]
					}, {
						"title": "心理健康秘诀：如何在快节奏的现代生活中实现内心平静",
						"author": "心灵导航者",
						"count": 30,
						"imgUrl": [
							"https://s3.bmp.ovh/imgs/2024/05/31/4616fb1d6c9e2332.jpeg",
						]
					},
					{
						"title": "走进自然：户外运动对身心健康的多重益处探讨",
						"author": "户外探险家",
						"count": 25,
						"imgUrl": [
							"https://s3.bmp.ovh/imgs/2024/05/31/40678e475f02bf0e.jpg",
						]
					},
					{
						"title": "睡眠质量对健康的影响：如何优化睡眠环境以提高睡眠质量",
						"author": "睡眠专家",
						"count": 20,
						"imgUrl": [
							"https://s3.bmp.ovh/imgs/2024/05/31/82317232a43806a4.jpeg"
						]
					},
					{
						"title": "预防胜于治疗：日常生活中的简单习惯，帮助您远离疾病",
						"author": "健康倡导者",
						"count": 18,
						"imgUrl": [
							"https://s3.bmp.ovh/imgs/2024/05/31/825bfcd7151b8b21.png",
						]
					},
				],
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {

			},
		}
	}
</script>

<style lang="scss">
	.index-container {
		min-height: 100vh;
		// background-color: #f7f8f9;

		.search-wrapper {
			@include flex(space-between, center);
			padding: 5px 15px;
			background-color: #ffffff;

			.scan {
				margin-left: 8px;
			}
		}

		.tabs-wrapper {
			padding: 5px 10px 10px;
			background-color: #ffffff;
		}

		.index-wrapper {
			// padding: 0px 15px 15px;
		}

		.news-wrapper {
			@include flex($align: center) padding: 5px 0;
			border-radius: 20rpx;
			background-color: #fff;

			.news-name {
				@include flex($align: center) padding: 0px 10px;
				border-right: 1px solid #e7ebf2;
				font-size: 14px;
				color: #333;
			}

			.u-notice-bar {
				background-color: transparent !important;
				padding: 10px 5px 5px 0px;
				font-size: 14px;
			}
		}

		.more-wrap {
			margin: 0px 0px 10px;
			padding: 10px;
			border-radius: 10px;
			background-color: #ffffff;

			.menus-grid {
				display: grid;
				gap: 20px 10px;

				.menus-items {
					@include flex($align: center, $direction: column);
				}
			}
		}

		.question-wrap {
			padding: 10px 15px;
			border-radius: 20rpx;
			background-color: #ffffff;

			.dynamic-header {
				@include flex(space-between, center);
				margin-bottom: 5px;
				padding: 5px;

				.dynamic-name {
					font-size: 16px;
					font-weight: bold;
				}

				.dynamic-reload {
					@include flex($align: center);

					text {
						margin-left: 3px;
						font-size: 13px;
						color: $u-info;
					}
				}
			}

			.dynamic-more {
				padding: 10px 0;
				text-align: center;
				font-size: 14px;
				color: #3c9cff;
			}

			.question-items {
				@include flex(space-between);
				margin-bottom: 10px;
				padding: 5px 5px 10px;
				border-bottom: 1px solid #f0f0f0;
				background-color: #ffffff;

				.question-left {
					@include flex($justify: space-between, $direction: column);
					padding-right: 10px;

					.question-title {
						@include text-lines(2);
						font-size: 15px;
						color: #303133;
					}

					.question-img {
						@include flex;
						margin: 5px 0px;

						.item {
							margin-right: 3px;
						}
					}

					.question-info {
						font-size: 12px;
						color: #767a82;
					}
				}
			}


		}
	}
</style>